<template>
  <div>
      <!-- 首页底部导航 -->
    <van-tabbar v-model="active" @change="changeFn" :placeholder='true' active-color="red" >
      <van-tabbar-item  to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item  to="/topic" icon="label-o">专题</van-tabbar-item>
      <van-tabbar-item  to="/category" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item  to="/car" icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item  to="/user" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      active:0,
    };
  },
  components: {},
  methods: {
    changeFn(active) {
      
      // this.active = active
    },
    
  },
   mounted(){
      // 解决刷新后，tabbar高亮按钮始终显示在第一个上
      // window.location.pathname获取地址栏中的路径
      switch( window.location.pathname){
        case '/home' :  this.active = 0;break;
        case '/topic' :  this.active = 1;break;
        case '/category' :  this.active = 2;break;
        case '/car' :  this.active = 3;break;
        case '/user' :  this.active = 4;break;
        default : this.active = 0;
      }
    }
};
</script>
<style scoped lang='less'>
</style>